<template>
    <div class="login">
        <div class="login-left">
			<div class="login-left-img">
				<img src="../../assets/img/logo.png" class="logo">
			</div>
			<div class="login-left-block">
				<v-layoutOne imgSrc="recruit.png" title='招聘会' content='线上、线下招聘任意选'></v-layoutOne>
				<v-layoutOne imgSrc="share.png" title='校企合作' content='企业与高校直接人才对接'></v-layoutOne>
			</div>
		</div>
        <div class="login-right">
			<div class="login-right-title">账号登录</div>
			<div class="login-right-line"><p></p></div>
			<div class="login-right-block">
				<v-layoutForm imgSrc="account.png" place="请输入账号" ref="account"></v-layoutForm>
				<v-layoutForm imgSrc="password.png" place="请输入密码" ref="password"></v-layoutForm>
			</div>
			<div class="login-right-btn">
				<el-button type="primary" @click="getVal()">登录</el-button>
			</div>

			<div class="login-right-footer">
				<p>嘉兴市秀峰网络科技有限公司</p>
				<p>联系电话：0573-82828308</p>
			</div>
		</div>
    </div>
</template>
<style lang="scss">
	body{
		background: url('../../assets/img/bg.png')  no-repeat center center fixed;
		background-size: cover;
	}

	.login{
		display: flex;
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		width: 800px;
		height: 500px;
		border-radius: 10px;
		opacity: 0.9;

		.login-left{
			width: 260px;
			height: 100%;
			text-align: center;
			border-right:1px solid #e1f2ff;

			.logo{
				width: 100px;
				height: 100px;
				margin-top:40px;
			}

			.login-left-block{
				margin-top:100px;
			}
		}

		.login-right{
			width: 540px;

			.login-right-title{
				text-align: center;
				font-weight: bold;
				font-size: 18px;
				margin-top:40px;
			}

			.login-right-line{
				border-bottom:1px solid rgb(242, 242, 242);
				width: 80%;
				margin: 20px 10%;
				position: relative;

				p{
					text-align: center;
					padding: 0;
					margin: 0;
					background-color: rgb(2,164,234);
					height: 2px;
					width: 120px;
					position: absolute;
					left: 50%;
					transform: translate(-50%, -50%);
    				bottom: -2px;
				}
			}

			.login-right-block{
				margin-top:40px;
			}

			.login-right-btn{
				text-align: center;
				margin-left: 30px;
				button{
					width: 200px;
				}
			}

			.login-right-footer{
				font-size: 12px;
				text-align: center;
				margin-top: 80px;
				color: #ccc;
			}
		}

	}
</style>

<script>
import LayoutOne  from '../../components/LayoutOne';
import LayoutForm from '../../components/LayoutForm';

export default {
	data() {
		return {
		}
	},
	methods: {
		getVal(){
			this.$router.push({path:'about'});
			// let account  = this.$refs.account.input;
			// let password = this.$refs.password.input;

			// if(!account || !password){
			// 	this.$message.warning({
			// 		message: '账号密码不能为空',
			// 	});
			// 	return  false;
			// }

			// this.axios.post(this.GLOBAL.coDomain+'login/index',{account,password}).then((response) => {
			// 	if(response.data.code == 2){
			// 		this.$message.error('账号或密码错误');
			// 	}
			// 	localStorage.setItem("username", "John");
			// 	return false;
			// }).catch(() => {})
		}
		
	},
	components:{
		'v-layoutOne':LayoutOne,
		'v-layoutForm':LayoutForm
	}
}
</script>